<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">
    <meta name="referrer" content="no-referrer"/>
    <!-- Favicon -->
    <link rel="shortcut icon" href="background/images/favicon.ico">
    <!-- Switchery css -->
    <link href="background/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <!-- Bootstrap CSS -->
    <link href="background/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome CSS -->
    <link href="background/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Custom CSS -->
    <link href="background/css/style.css" rel="stylesheet" type="text/css" />
    <!-- BEGIN CSS for this page -->
    <link rel="stylesheet" type="text/css" href="common/css/dataTables.bootstrap4.min.css"/>
    <link rel="stylesheet" href="background/EditorMD/lib/codemirror/codemirror.min.css">
    <link rel="stylesheet" href="background/EditorMD/css/editormd.css">
    <link rel="stylesheet" href="common/tagsinput/jquery-tagsinput.min.css">
    <style>
        .tag{
            color: white;
        }
    </style>
    <!-- END CSS for this page -->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="breadcrumb-holder">
                <h1 class="main-title float-left">
                    <i class="fa fa-pencil bigfonts"></i> 开始你的创作 &ensp;
                </h1>
                <ol class="breadcrumb float-right">
                    <li class="breadcrumb-item">个人中心</li>
                    <li class="breadcrumb-item active">写笔记</li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3">
            <div class="form-group row" style="padding: 0px 10px">
                <img th:if="${note.imgUrl != null}" th:src="${note.imgUrl}" class="img-thumbnail" id="img_head" style="width: 100%;height:150px " alt="">
                <img th:if="${note.imgUrl == null}" class="img-thumbnail" id="img_head" style="width: 100%;height:150px " alt="">
            </div>
        </div>
        <div class="col-xs-8 col-sm-8 col-md-8" style="padding: 60px 0">
            <input type="file" name="image" onchange="uploadImg()" id="img" accept="image/jpeg,image/jpg,image/png"><br>
            <small class="text-danger">你可以上传这篇笔记的封面</small>
        </div>
        <div class="col-xs-1 col-sm-1 col-md-1">
            <button class="btn btn-success btn-sm" style="position: absolute;bottom: 20px" onclick="notePublish()"><i class="fa fa-recycle"></i>发布</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group row" style="padding: 0px 10px">
                <input th:if="note.title==null" type="text" class="form-control col-sm-12" id="title" autocomplete="off" placeholder="请输入笔记标题">
                <input th:if="note.title!=null" th:value="${note.title}" type="text" class="form-control col-sm-12" id="title" autocomplete="off" placeholder="请输入笔记标题">
                <input th:if="note.id!=null" th:value="${note.id}" type="hidden" id="id">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12" style="height: 100vh">
            <div id="editormd">
                <textarea th:if="${note.content != null}" id="content" style="display:none;" th:text="${note.content}"></textarea>
                <textarea th:if="${note.content == null}" id="content" style="display:none;"></textarea>
            </div>
        </div>
    </div>
</div>
</body>
<script src="background/js/modernizr.min.js"></script>
<script src="background/js/jquery.min.js"></script>
<script src="background/js/moment.min.js"></script>

<script src="background/js/popper.min.js"></script>
<script src="background/js/bootstrap.min.js"></script>

<script src="background/js/detect.js"></script>
<script src="background/js/fastclick.js"></script>
<script src="background/js/jquery.blockUI.js"></script>
<script src="background/js/jquery.nicescroll.js"></script>
<script src="background/js/jquery.scrollTo.min.js"></script>
<script src="background/plugins/switchery/switchery.min.js"></script>

<!-- App js -->
<script src="background/js/pikeadmin.js"></script>

<!-- BEGIN Java Script for this page -->
<!--引入MarkDown-->
<script type="text/javascript" src="background/EditorMD/editormd.amd.min.js"></script>
<script>
    var editor;
    $(function () {
        editor = editormd("editormd", {
            placeholder: "此处开始编写文章的内容...",
            path: 'background/EditorMD/lib/',
            saveHTMLToTextarea: true,//注意3：这个配置，方便post提交表单
            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "image/article",//注意你后端的上传图片服务地址
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,
            codeFold: true,
            watch: true,
            toolbarIcons : function() {
                // Or return editormd.toolbarModes[name]; // full, simple, mini
                return ["undo", "redo", "|", "bold", "italic", "quote", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "|", "list-ul", "list-ol", "hr", "|", "link", "image", "code", "code-block", "table", "html-entities", "|", "watch", "preview", "clear", "|", "help"]
            },
        });

        //监听粘贴服务
        document.addEventListener('paste', function (event) {
            var items = (event.clipboardData || window.clipboardData).items;
            var file = null;
            if (items && items.length) {
                // 搜索剪切板items
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        file = items[i].getAsFile();
                        break;
                    }
                }
            } else {
                alert("当前浏览器不支持");
                return;
            }
            if (!file) {
                return;
            }
            // 此时file就是我们的剪切板中的图片对象
            // 这里是上传
            var xhr = new XMLHttpRequest();
            // 上传结束
            xhr.onload = function () {

            };
            xhr.onerror = function () {
                alert("网络异常，上传失败!");
            };
            var formData = new FormData();
            formData.append("editormd-image-file", file);
            xhr.open('POST', 'image/article', true);
            xhr.send(formData);
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status < 300 || xhr.status === 304){
                        //5.处理返回的结果
                        var obj = xhr.responseText;
                        var objarr = eval("("+obj+")");
                        if (objarr["success"] == 1){
                            editor.insertValue("![](" + objarr["url"] + ")");
                        }else{
                            alert("粘贴图片失败!");
                        }
                    }
                }
            }
        });
    });
</script>
<script src="common/tagsinput/jquery.color.plus-names.min.js"></script>
<script src="common/tagsinput/jquery-tagsinput.min.js" defer></script>
<script src="common/js/sweetalert.min.js"></script>
<script>
    function uploadImg() {
        let formdata=new FormData();
        formdata.append("image",$("#img").get(0).files[0]);
        formdata.append("flag",5);
        $.ajax({
            async: false,
            type: "POST",
            url: "image/upload",
            dataType: "json",
            data: formdata,
            contentType:false,//ajax上传图片需要添加
            processData:false,//ajax上传图片需要添加
            success: function (data) {
                if (data['code']== 200){
                    $('#img_head').attr("src",data['data']);
                    swal("成功", "上传成功", "success");
                }else {
                    swal("错误", "服务器发生了一个错误", "error");
                }
            },
            error: function (e) {
            }
        });
    }

    function notePublish() {
        let id = $('#id').val().trim();
        let title = $('#title').val().trim();
        let imgObj = document.getElementById("img_head");
        let imgUrl = imgObj.getAttribute("src");
        let content = $('#content').val().trim();
        console.log(imgUrl);
        if (title == ''){
            swal("警告","标题不能为空！", "warning");
            return;
        }else if(imgUrl == ''){
            swal("警告","笔记封面不能为空！", "warning");
            return;
        }else if(content == ''){
            swal("警告","笔记内容不能为空！", "warning");
            return;
        }
        $.ajax({
            type: "POST",
            url: "addNote",
            data: {id:id,title:title,imgUrl:imgUrl,content:content},
            dataType: "json",
            success: function(data){
                if (data['code']== 200){
                    swal("添加笔记成功", "", "success")
                        .then(() => {
                            var location = window.location.href;
                            let strings = location.split("iStudy");
                            window.location.href = strings[0]+"iStudy/personalCenter";
                        });
                }else if(data['code']==500){
                    swal("添加笔记失败", "", "error")
                        .then(() => {
                            var location = window.location.href;
                            let strings = location.split("iStudy");
                            window.location.href = strings[0]+"iStudy/personalCenter";
                        });
                }else if(data['code']==201){
                    swal("修改笔记成功", "", "success")
                        .then(() => {
                            var location = window.location.href;
                            let strings = location.split("iStudy");
                            window.location.href = strings[0]+"iStudy/personalCenter";
                        });
                }else if(data['code']==501){
                    swal("修改笔记失败", "", "error")
                        .then(() => {
                            var location = window.location.href;
                            let strings = location.split("iStudy");
                            window.location.href = strings[0]+"iStudy/personalCenter";
                        });
                }
            }
        });
    }

</script>
</body>
</html>